<template>
<view class="container">
		<uni-nav-bar status-bar="true" title="国家普惠社区"></uni-nav-bar>
		
		<view class="logo">
			<view>
				<image style="width: 132rpx;height: 132rpx;" src="https://inclusivecommunity.oss-cn-chengdu.aliyuncs.com/attach/2020-07/11d8220200709195639894.png" mode=""></image>
			</view>
		</view>
		
		<view class="form">
			<form v-if="is_code" @submit="formSubmit">
				<view class="uni-form-item uni-column">
					<input class="uni-input" name="input" v-model="ruleForm.cardNo" placeholder="请输入银行卡号" />
				</view>
				<view class="uni-form-item uni-column">
					<input class="uni-input" name="input" v-model="ruleForm.phone" placeholder="请输入预留手机号" />
				</view>
				<view class="uni-form-item uni-column code">
					<input class="uni-input" name="input" v-model="smsCodes" maxlength="6" placeholder="请输入验证码" />
					
					<view class="time" @tap="send">{{ code }}</view>
				</view>
				<view class="uni-btn-v">
					<button form-type="submit">下一步</button>
				</view>
			</form>
		</view>
	</view>
</template>

<script>
	import {applyBankCardBind, bindBankCard} from '@/api/register.js'
	
	import {checkBank} from '@/utils/bank.js'
	
	export default {
		data() {
			return {
				is_code: true,
				
				ruleForm: {
					cardNo: '',
					phone: ''
				},
				
				smsCodes: '',
				
				code: '获取验证码',
				t: 60,
			}
		},
		methods: {
			formSubmit (e) {
				const _this = this;
				if (_this.ruleForm.cardNo === '') {
					uni.showToast({
						title: '请输入银行卡号',
						icon: 'none'
					})
					return false
				} else {
					if (!checkBank(_this.ruleForm.cardNo)) {
						uni.showToast({
							title: '请输入正确的银行卡号',
							icon: 'none'
						})
						return false
					} else {
						if (_this.ruleForm.phone === '') {
							uni.showToast({
								title: '请输入手机号',
								icon: 'none'
							})
							return false
						} else {
							if (!/(^1[3|4|5|6|7|8|9][0-9]{9}$)/.test(_this.ruleForm.phone)) {
								uni.showToast({
									icon: "none",
									title: "请输入正确的手机号码"
								});
								return false;
							} else {
								if (this.smsCodes === '') {
									uni.showToast({
										icon: "none",
										title: "请输入验证码"
									});
									return false;
								} else {
									if (this.smsCodes.length !== 6) {
										uni.showToast({
											icon: "none",
											title: "验证码格式错误"
										});
										return false;
									} else {
										uni.showLoading({
											mask: true
										})
										bindBankCard({
											smsCodes: _this.smsCodes
										}).then(res => {
											if (res.status === 200) {
												uni.showToast({
													title: res.msg,
													icon: 'success'
												})
												uni.navigateTo({
													url: '/pages/register/payment/payment'
												})
											}
										})
									}
								}
							}
						}
					}
				}
			},
			
			submit (e) {
				bindBankCard({
					smsCodes: this.smsCodes
				}).then(res => {
					if (res.status === 200) {
						
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			
			send () {
				const _this = this;
				if (_this.ruleForm.cardNo === '') {
					uni.showToast({
						title: '请输入银行卡号',
						icon: 'none'
					})
					return false
				} else {
					if (!checkBank(_this.ruleForm.cardNo)) {
						uni.showToast({
							title: '请输入正确的银行卡号',
							icon: 'none'
						})
						return false
					} else {
						if (_this.ruleForm.phone === '') {
							uni.showToast({
								title: '请输入手机号',
								icon: 'none'
							})
							return false
						} else {
							if (!/(^1[3|4|5|6|7|8|9][0-9]{9}$)/.test(_this.ruleForm.phone)) {
								uni.showToast({
									icon: "none",
									title: "请输入正确的手机号码"
								});
								return false;
							} else {
								if (_this.t === 60 && _this.code === '获取验证码') {
									_this.code = _this.t + 's';
									applyBankCardBind(_this.ruleForm).then(res => {
										if (res.status === 200) {
											uni.showToast({
												title: res.msg,
												icon: 'success'
											})
										}
									})
									const times = setInterval(() => {
										_this.t--;
										if (_this.t !== 0) {
											_this.code = _this.t + 's';
										} else {
											_this.t = 60;
											_this.code = '获取验证码'
											clearInterval(times)
										}
									}, 1000)
								}
							}
						}
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	
	.logo {
		padding-top: 90rpx;
		
		view {
			margin: 0 auto;
			width: 132rpx;
			height: 132rpx;
			padding: 16rpx;
			box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.1);
			border-radius: 30rpx;
		
			image {
				border-radius: 32rpx;
			}
		}
	}
	
	.form {
		width: 600rpx;
		max-width: 95%;
		margin-top: 300rpx;
		
		.uni-form-item {
			border: 1px solid #EEEEEE;
			box-sizing: border-box;
			margin-bottom: 50rpx;
			padding: 18rpx 20rpx;
			border-radius: 5px;
			font-size: 15rpx;
			position: relative;
			
			&.code {
				padding-right: 160rpx;
				.time {
					position: absolute;
					right: 30rpx;
					top: 50%;
					transform: translateY(-50%);
					font-size: 25rpx;
				}
			}
		}
		
		uni-button {
			background-color: #42b983;
			color: #ffffff;
			margin-top: 70rpx;
		}
	}
}
</style>
